<template>
  <div class="web-definition" tabindex="1" @blur="hiddenDrop">
    <div class="drop-select active" :class="{ [network?.network]: network.network, loading: network.loading }"
      @click="showDrop">
      {{ activeName }}
    </div>
    <div v-if="show" class="drop-menu">
      <div v-for="x in network.list" :key="x.id" class="item" :class="{ active: value === x.value }"
        @click="() => chooseItem(x.value)">{{ x?.label }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="WebDefinition">
import { useNetworkStore } from '@/store/network'

const network = useNetworkStore()
const show = ref(false)
const value = ref(network.getValue())

const data = network.list

const activeName = computed(() => {
  return data.find((i) => i.value === value.value)?.label
})

const showDrop = () => {
  show.value = !show.value
}

const hiddenDrop = () => {
  show.value = false
}
// 选择清晰度
const chooseItem = (item) => {
  show.value = false
  if (item === value.value) return
  value.value = item
  network.adj(item)
}

</script>

<style lang="scss" scoped>
.web-definition {
  @apply absolute text-right cursor-pointer z-11;
  font-size: 14px;
  top: 27px;
  right: 10px;

  .drop-select {
    background: rgba(255, 255, 255, 0.40);
    border-radius: 12px;
    padding: 2px 10px;
    color: rgba(98, 115, 140, 1);
    letter-spacing: 1px;

    &.active {
      &::before {
        content: '';
        @apply inline-block;
        width: 10px;
        height: 10px;
        background: rgba(0, 0, 0, 0.45);
        border-radius: 50%;
        margin-right: 5px;
        background: rgba(105, 162, 255, 1);
      }
    }

    &.bad {
      &::before {
        background: rgba(255, 16, 35, 1);
      }
    }

    &.loading {
      @keyframes loading {
        from {
          transform: rotate(0);
        }

        to {
          transform: rotate(360deg);
        }
      }

      &::before {
        content: '';
        width: 10px;
        height: 10px;
        margin-right: 5.3px;
        background: url(../../assets/images/radio-loading.png) no-repeat center center / cover;
        animation: loading 1s infinite;
      }
    }
  }

  .drop-menu {
    @apply inline-block;
    background: rgba(62, 74, 86, 0.4);
    color: #ffffff;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 6px;

    .item {
      font-size: 12px;
      letter-spacing: 2px;
      margin: 3px 0;

      &::before {
        content: '';
        @apply inline-block;
        width: 7px;
        height: 7px;
        background: rgba(0, 0, 0, 0.45);
        border-radius: 50%;
        margin-right: 10px;
        background: rgba(0, 0, 0, 0.45);
      }

      &.active {
        &::before {
          background: rgba(105, 162, 255, 1);
        }
      }
    }
  }
}
</style>